const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'js/[name].[contenthash:10].js',
        path: resolve(__dirname, 'build'),
        chunkFilename: 'js/[name].[contenthash:10]_chunk.js',
    },
    plugins: [new HtmlWebpackPlugin()],
    optimization: {
        splitChunks: {
            chunks: 'all',
            //默认值，可以不写
            // minSize: 30 * 1024,//分割chuank最小为30kb
            // maxSize: 0,//最大没有限制
            // minChunks: 1,//要提取的chunk最少被引用一次
            // maxAsyncRequests: 5,//按需加载的文件最大数
            // maxInitialRequests: 3,//入口js文件最大并行请求数量
            // automaticNameDelimiter: '~',//名称连接符
            // name: 'true',//可以使用命名规则
            // cacheGroups: {//分割chunk的组
            //     //node_modules 文件打包到vendors组的chunk中 -->vendors~xxx
            //     //满足上面的公共规则，如：大小超过30kb，至少被引用一次
            //     vendors: {
            //         test: /[\\/]node_modules[\\/]/,
            //         //优先级
            //         priority:-10
            //     },
            //     default: {
            //         //要提取的chunk至少被引用两次
            //         minChunks: 2,
            //         //优先级
            //         priority: -20,
            //         //如果当前打包模块和之前已经提取的模块是同一个就会复用，而不是重新打包
            //         reuseExistingChunk:true
            //     }
            // }
        },
        //将当前模块记录其他模块的hash单独打包为一个文件， runtime
        //解决了修改a文件导致b文件的contenthash变化
        runtimeChunk: {
            name: entrypoint => `runtime-${entrypoint.name}`,
        },
        minimizer: [
            //配置生产环境的压缩方案：js,css
            new TerserWebpackPlugin({
                // 开启缓存
                cache: true,
                //开启多进程打包
                parallel: true,
                //启动source-map
                sourceMap: true,
            }),
        ],
    },
};
